:scss
  table {
    border-collapse:separate;
    border-spacing:0;
    table-layout:fixed;
    width:100%
  }

  table td {
    font-family:Helvetica,Arial,sans-serif;
    padding:0;
  }

  .alignMiddle{
    vertical-align:middle!important
  }

  .divider{
    background-color:#f0f0f0;
    border:none;
    color:#f0f0f0;
    height:1px;
    margin:0;
  }

  .lightText{
    color:#8c8c8c;
  }

  .app_logo{
    border:none;
    color:#8c8c8c;
    font-weight:bold;
    outline:none!important;
    text-decoration:none;
  }

  .avatar {
    background-clip:padding-box;
    border-radius:20px;
    display:inline-block;
    height:40px;
    max-width:100%;
    outline:none;
    text-decoration:none;
    width:40px;
  }

  .agent_data {
    table {
      border:none;
      border-collapse:separate;
      border-spacing:0;
      margin:0;
      table-layout:fixed;
    }
  }

  #badge{
    font-size: 0.7em;
  }

  /* editor styles , move to shared */
  #editor-container {
      padding: 0;
      margin: 0;
      position: relative;
      color: rgba(0,0,0,.8);
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      -moz-font-feature-settings: liga on;
      font-size: 8px;
      line-height: 1.4;

      font-family: Georgia,Cambria,Times New Roman,Times,serif;
      letter-spacing: .01rem;
      font-weight: 400;
      font-style: normal;
      font-size: 16px;
      line-height: 1.9;

      .graf--h2 {
          font-family: jaf-bernino-sans,Open Sans,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Geneva,Verdana,sans-serif;
          //font-size: 60px;
          font-style: normal;
          font-weight: 700;
          letter-spacing: -.04em;
          line-height: 1;
          margin-bottom: 8px;
          margin-left: -3px;
          margin-top: 40px;
          padding-top: 0;
      }

      .graf--h2+.graf--h3, .graf--h2+.graf--h4 {
          margin-top: -6px;
      }

      .graf--h3, .graf--h4 {
          font-family: jaf-bernino-sans,Open Sans,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Geneva,Verdana,sans-serif;
          letter-spacing: -.02em;
          font-style: normal;
          line-height: 1.2;
          margin-top: 40px;
      }

      .graf--h3 {
          font-weight: 700;
          font-size: 36px;
          margin-left: -1.8px;
          margin-bottom: 4px;
      }

      .graf--h3+.graf--h4, .graf--h4+.graf--h3 {
          margin-top: -2px;
      }

      .graf--h4 {
          font-weight: 300;
          font-size: 30px;
          margin-left: -1.5px;
          color: rgba(0,0,0,.44);
          margin-bottom: 2px;
      }

      .graf--p,
      .graf--p,
      .graf--p a,
      .graf--figure,
      .graf--figure > div > span,
      .graf--figure > div > a ,
      .graf--column,
      .graf--column,
      .graf--column {
          font-size: 16px;
      }

      .graf--figure {
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          clear: both;
          margin-bottom: 30px;
          outline: medium none;
          position: relative;
      }

      .graf--blockquote, blockquote {
          //font-family: $dante-font-family-serif;
          border-left: 3px solid rgba(0, 0, 0, .8);
          font-style: italic;
          font-weight: 400;
          letter-spacing: 0.16px;
          letter-spacing: 0.01rem;
          margin-left: 0px;
          padding-left: 14px;
          margin-bottom: 25px;
          font-size: 1em;
          line-height: 1.9em;
          margin-top: 20px;
      }

      .aspect-ratio-fill{
        display:none;
      }

      .graf-image, .graf-imageAnchor, .iframeContainer, .iframeContainer>iframe {
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          display: block;
          margin: auto;
          max-width: 100%;
      }

      .aspectRatioPlaceholder {
          margin: 0 auto;
          position: relative;
          width: 100%;
      }

      .imageCaption {
          top: 0;
          text-align: center;
          margin-top: 0;
          font-family: jaf-bernino-sans,Open Sans,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Geneva,Verdana,sans-serif;
          letter-spacing: 0;
          font-weight: 400;
          font-size: 13px;
          line-height: 1.4;
          color: rgba(0,0,0,.6);
          outline: 0;
          z-index: 300;
          margin-top: 10px;
          position: relative;
      }


      @media (max-width: 1200px){

        .imageCaption, .postField--outsetCenterImage>.imageCaption {
            position: relative;
            width: 100%;
            text-align: center;
            left: 0;
            margin-top: 10px;
        }

      }

      @media screen and (min-width: 768px){
          .jumbotron {
              padding-top: 48px;
              padding-bottom: 48px;
          }        
      }

      .jumbotron {
          padding-top: 30px;
          padding-bottom: 30px;
          margin-bottom: 30px;
          color: inherit;
          background-color: #eee;
          padding-right: 60px;
          padding-left: 60px;
      }


      @media (min-width: 768px){
          .col-sm-6 {
              width: 50%;
          }
      }

      @media (min-width: 768px){
          .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9 {
              float: left;
          }
      }

      .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, 
      .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, 
      .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, 
      .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, 
      .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, 
      .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, 
      .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, 
      .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12,
      .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6,
      .col-xs-7, .col-xs-8, .col-xs-9 {
          position: relative;
          min-height: 1px;
          padding-right: 15px;
          padding-left: 15px;
      }

      .dante-clearfix:before {
          display: table;
          content: " ";
      }

      .signature { 

          position: relative;
          display: table;
          float: left;
          margin-bottom: 20px;
      
          img {
              float: left;
              margin-right: 30px;
              margin-bottom: 0 !important;
              height: 100px;
              width: 100px;
              border-radius: 50px;
              height: 100px;
              width: 100px;
              border-radius: 50px;
          }

          .signature {
              display: table;
              float: left;
          }

          .text {
            width: 100%;
            display: table-cell;
            vertical-align: middle;
        }

      }

      .graf--mixtapeEmbed, .markup--mixtapeEmbed-strong {
          font-family: jaf-bernino-sans,Open Sans,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Geneva,Verdana,sans-serif;
          font-style: normal;
          font-weight: 300;
          letter-spacing: -.02em;
      }

      .graf--mixtapeEmbed {
          color: rgba(0,0,0,.6);
          font-size: 12px;
      }

      .graf--mixtapeEmbed {
          border: 1px solid rgba(0,0,0,.15);
          border-radius: 5px;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          margin-bottom: 40px;
          margin-top: 40px;
          max-height: 310px;
          max-width: 700px;
          overflow: hidden;
          padding: 30px;
          position: relative;
      }

      .graf--mixtapeEmbed a {
        text-decoration: none;
      }

      .mixtapeImage {
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: cover;
        float: right;
        height: 310px;
        margin: -30px -30px 0 25px;
        width: 310px;
      }

      .graf--mixtapeEmbed a {
        text-decoration: none;
      }

      .markup--mixtapeEmbed-strong {
          color: #000;
          display: block;
          font-size: 30px;
          line-height: 1.2;
          margin-bottom: 0;
      }

      .markup--mixtapeEmbed-em {
          display: block;
          font-size: 16px;
          font-style: normal;
          margin-bottom: 10px;
          max-height: 120px;
          overflow: hidden;
      }
  }

  .name {
    color:#000;
  }

  .dark{
    color:#222;
  }



%table{:align => "center", :bgcolor => "transparent", :border => "0", :cellpadding => "0", :cellspacing => "0"}
  %tbody
    %tr
      %td
        #editor-container{:style => "margin-top:0;padding-top:0"}
          = @conversation_part.message.html_content.html_safe
    %tr
      %td{:style => ""}
        .agent_data
          %table{:bgcolor => "transparent", :border => "0", :cellpadding => "0", :cellspacing => "0"}
            %tbody

              %tr
                %td.alignMiddle{:align => "left", :style => "border:none;", :valign => "middle", :width => "50"}
                  %img.avatar{:alt => @author_name, :height => "32", :src => @conversation_part.authorable.avatar_url, :style => "", :width => "32"}/
                %td.alignMiddle{:align => "left", :style => "border:none;", :valign => "middle"}
                  %strong.name= @author_name
                  %span.dark{:style => ""} from #{@app_name}

    %tr{:height => "20"}
    %tr
      %td{:style => ""}
        %hr.divider/
    %tr
      %td{:style => ""}
        %table{:align => "left", :width => "100%"}
          %tbody
            %tr{:height => "15"}
            %tr
              %td#badge.lightText{:valign => "top"}
                Powered by
                %a.app_logo{:href => "https://chaskiq.io", :style => "", :target => "_blank"}
                  %strong Chaskiq
    %tr{:height => "35"}